<template>
  <div class="user-info">
  <div>旧密码</div>
    <input
      class="txt"
      type="password"
      v-model="oldpassword"
      placeholder="请输入旧密码"
    />
    <div>新密码</div>
    <input
      class="txt"
      type="password"
      v-model="newpassword"
      placeholder="请输入新密码"
      />
    <Button
      type="success"
      style="width: 84%; margin-left: 8%; border-radius: 20px; margin-top: 50px"
      @click="saveHandle"
      >确认修改</Button
    >
  </div>
</template>
<script setup>
import { Button,Toast } from "vant";
import { ref } from "vue";
import{stringify}from "qs"
import { useRouter } from "vue-router";
import {modifyPasswordAPI} from "../services/shop";
const oldpassword = ref("");
const newpassword = ref("");
const { push } = useRouter();
const router = useRouter();
const saveHandle = () => {
  modifyPasswordAPI(stringify({oldPassword:oldpassword.value,newPassword:newpassword.value})).then((res)=>{
  console.log(res);
  if(res.code==200){
    Toast.success("修改成功");
    push({
    name: "AccountLogin",
  });
  }else{
    Toast.fail("修改失败");
  }
  
})
};
</script>

<style scoped>
.user-info {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.user-info img {
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  display: block;
  margin: 8px auto;
}
.txt {
  display: block;
  margin: 16px auto;
  width: 80vw;
  /* font-size: 1.2rem; */
  padding: 8px;
  border: none;
  outline: none;
  box-shadow: 0 1px 0 #993366;
}
</style>
